<template>
  <div class="app">
    <myNavbar title="实名认证"></myNavbar>
    <list>
      <cell>
        <div class="realName">
              <text class="realName_header_title">个人信息</text>
              <div class="realName_item">
                <text class="realName_item_title">姓名</text>
                <input class="realName_item_content" v-model="realNameForm.cardName" placeholder="请输入姓名"/>
              </div>
              <div class="realName_item">
                <text class="realName_item_title">身份证号</text>
                <input class="realName_item_content" v-model="realNameForm.idCardNo" placeholder="请输入身份证号"/>
              </div>
              <div class="realName_item" >
                <text class="realName_item_title">支付宝账号</text>
                <input class="realName_item_content" v-model="realNameForm.bankCardNo" placeholder="请输入支付宝"/>
              </div>


        </div>
        <div class="realName">



          <div class="realName_item">
            <text class="realName_item_title">手机号</text>
            <input class="realName_item_content" v-model="realNameForm.mobile" placeholder="请输入手机号"/>
          </div>

<!--          <div class="realName_item">-->
<!--            <text class="realName_item_title">验证码</text>-->
<!--            <input class="realName_item_content" v-model="realNameForm.verifyCode" placeholder="请输入验证码"/>-->
<!--            <div class="realName_item_botton" @click="verificationClick">-->
<!--              <text class="realName_item_botton_title">{{ isShow == true ? '获取验证码' : second + "s" }}</text>-->
<!--            </div>-->
<!--          </div>-->

          <div class="realName_item" v-if="btnText=='提交实名'">
            <text class="realName_item_title">验证码</text>
            <input class="realName_item_content" v-model="realNameForm.verifyCode" placeholder="请输入验证码"/>
            <div class="realName_item_botton" @click="verificationClick">
              <text class="realName_item_botton_title">{{ isShow == true ? '获取验证码' : second + "s" }}</text>
            </div>
          </div>
        </div>
        <div class="realName">
          <text class="realName_header_title">证件照片</text>
          <div class="realName_item_imgbox">
            <image class="realName_item_img" @click=" addBtnFlag && pick('just')"
                   :src="realNameForm.imgCardFront?realNameForm.imgCardFront:imgCardFront"></image>
            <image class="realName_item_img" @click=" addBtnFlag && pick('back')"
                   :src="realNameForm.imgCardBack?realNameForm.imgCardBack:imgCardBack"></image>
          </div>

          <div class="realName_botton botton_Bg_Color" @click="addBtnFlag && realNameClick()">
            <text class="realName_botton_title">{{btnText}}</text>
          </div>


        </div>
      </cell>
    </list>
  </div>
</template>

<script>
import myNavbar from "../../../components/myNavbar/myNavbar";
import {policy} from "../../../api/oss";
import {getInfo} from "../../../api/user";


const picker = weex.requireModule('picker')
const picture = app.requireModule("eeui/picture");
const network = app.requireModule("eeui/network");
import {sendMsg, realName} from '../../../api/user'

export default {
  name: "index",
  data() {
    return {
      addBtnFlag:true,
      btnText:'提交实名',
      realNameForm: {
        cardName: '',
        mobile: '',
        idCardNo: '',
        bankCardNo: '',
        imgCardFront: '',
        imgCardBack: '',
        verifyCode: ''
      },
      imgCardFront: 'http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/People365/shenfenzhengzhengmian.png',
      imgCardBack: 'http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/People365/shenfenzhengfanmian.png',
      dataObj: {
        policy: '',
        signature: '',
        key: '',
        ossaccessKeyId: '',
        dir: '',
        host: ''
      },
      value: 0,
      uuid: '',
      images: [],
      imgType: '',
      second: 60,
      isShow: true,
      loading:false
    }
  },
  components: {
    myNavbar
  },
  created() {
    this.beforeUpload()
    this.getPersonalInformation()
  },
  methods: {

    getPersonalInformation(){
      getInfo().then(res=>{
        // console.log("11111111111111111111122222222222222222")
        // console.log( JSON.parse(res.data.userInfo.realNameInfo))
        if(res.data.userInfo.realNameStatus == 2){

          let realNameInfo = JSON.parse(res.data.userInfo.realNameInfo)
          if(realNameInfo.idCardNo){
            this.realNameForm.idCardNo= realNameInfo.idCardNo.replace(/^(.{4})(?:\d+)(.{4})$/,"$1****$2");
          }
          if(realNameInfo.mobile){
            this.realNameForm.mobile= realNameInfo.mobile.replace(/^(.{4})(?:\d+)(.{4})$/,"$1******$2");
          }
          if(realNameInfo.bankCardNo){
            this.realNameForm.bankCardNo = realNameInfo.bankCardNo.replace(/^(.{4})(?:\d+)(.{4})$/,"$1****$2");
          }
          this.realNameForm.cardName = realNameInfo.cardName
          this.realNameForm.imgCardFront = realNameInfo.imgCardFront
          this.realNameForm.imgCardBack = realNameInfo.imgCardBack
          this.btnText = '已实名'
          this.addBtnFlag = false
        }

      })
    },
    beforeUpload() {
      let _self = this;
      policy({mchId: this.getGlobalData().mchId}).then(response => {
        console.log(this.getGlobalData().mchId)
        _self.dataObj.policy = response.data.policy;
        _self.dataObj.signature = response.data.signature;
        _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
        _self.dataObj.dir = response.data.dir;
        _self.dataObj.key = response.data.dir + '/' + _self.uuid + "${filename}";
        _self.dataObj.host = response.data.action;
        _self.host = response.data.host
      }).catch(err => {
        console.log(err)
      })
    },
    pick(data) {
      this.imgType = data
      picker.pick({
        items: ['本地上传', '拍照上传']
      }, event => {
        if (event.result === 'success') {
          this.value = event.data
          this.fileClick()
        }
      })
    },
    fileClick() {
      var _this = this
      _this.uuid = this.getUUID()
      if (this.value == 0) {
        picture.create({
          type: 'gallery',
          gallery: 1,
          mode: 1
        }, function (result) {
          if (result.status == 'success') {
            console.log(result)
            var tempFilePath = result.lists[0].path
            _this.uploadImg(tempFilePath)
          }
        });
      } else if (this.value == 1) {
        picture.create({
          type: 'camera',
          gallery: 1,
          mode: 1
        }, function (result) {
          if (result.status == 'success') {
            console.log(result)
            var tempFilePath = result.lists[0].path
            _this.uploadImg(tempFilePath)
          }
        });
      }
    },
    // 上传图片
    uploadImg(filePath) {
      let _this = this;
      eeui.loading({
        cancelable:false
      });
      var typePath = filePath;
      console.log(filePath)
      _this.typePath = typePath.split('.')
      _this.dataObj.key = _this.dataObj.dir + '/' + _this.uuid + '.' + _this.typePath[_this.typePath.length - 1];
      console.log(_this.dataObj)
      console.log(filePath)
      network.upload({
        url: _this.dataObj.host,
        path: filePath,
        name: 'file',
        formData: _this.dataObj,
      }, (ret) => {
        console.log(ret)
        console.log('2222')
        if (ret.status == 200 || ret.status == 204) {
          let avatar = _this.dataObj.host + '/' + _this.dataObj.dir + '/' + _this.uuid + '.' + _this.typePath[_this.typePath.length - 1]
          if (_this.imgType == 'just') {
            _this.realNameForm.imgCardFront = avatar
          } else {
            _this.realNameForm.imgCardBack = avatar
          }
        }
        if (ret.status != 100) {
          eeui.loadingClose();
        }
      })
    },
    timer: function () {
      let promise = new Promise((resolve, reject) => {
        let setTimer = setInterval(
            () => {
              this.second = this.second - 1
              if (this.second <= 0) {
                this.second = 60;
                this.isShow = true;
                resolve(setTimer)
              }
            }, 1000)
      });
      promise.then((setTimer) => {
        clearInterval(setTimer)
      });
    },
    verificationClick() {
      var _this = this
      console.log(this.realNameForm.mobile.length)
      if (this.isShow == false) {
        return;
      }
      if (this.realNameForm.mobile == "" || this.realNameForm.mobile.length != 11 || !(/^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/.test(this.realNameForm.mobile))) {
        eeui.toast('请输入正确手机号码')
        return;
      }
      console.log(_this.getGlobalData().mchId)
      sendMsg({
        username: _this.realNameForm.mobile,
        tplKey: 'register',
        mchId: _this.getGlobalData().mchId,
      }).then(res => {
        this.timer()
        this.isShow = false
        console.log(res)
      }).catch(error => {
        console.log(error)
      })
    },
    realNameClick() {
      console.log("321321")
      var _this = this
      if (this.isNull(_this.realNameForm.cardName)) {
        eeui.confirm({
          title: "温馨提示",
          message: "请输入您的姓名！",
          buttons: [{
            title: "确定",
            type: "positive"
          }]
        }, function (result) {});
        return;
      }
      if (this.realNameForm.mobile == "" || this.realNameForm.mobile.length != 11 || !(/^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/.test(this.realNameForm.mobile))) {
        eeui.confirm({
          title: "温馨提示",
          message: "请输入正确的电话号码！",
          buttons: [{
            title: "确定",
            type: "positive"
          }]
        }, function (result) {});
        return;
      }
      if (this.isNull(_this.realNameForm.idCardNo)) {
        eeui.confirm({
          title: "温馨提示",
          message: "请输入您的身份证号！",
          buttons: [{
            title: "确定",
            type: "positive"
          }]
        }, function (result) {});
        return;
      }
      if (this.isNull(_this.realNameForm.bankCardNo)) {
        eeui.confirm({
          title: "温馨提示",
          message: "请输入您的银行卡号！",
          buttons: [{
            title: "确定",
            type: "positive"
          }]
        }, function (result) {});
        return;
      }
      if (this.isNull(_this.realNameForm.imgCardFront)) {
        eeui.confirm({
          title: "温馨提示",
          message: "请选择您的身份证正面！",
          buttons: [{
            title: "确定",
            type: "positive"
          }]
        }, function (result) {});
        return;
      }
      if (this.isNull(_this.realNameForm.imgCardBack)) {
        eeui.confirm({
          title: "温馨提示",
          message: "请选择您的身份证反面！",
          buttons: [{
            title: "确定",
            type: "positive"
          }]
        }, function (result) {});
        return;
      }
      if (this.isNull(_this.realNameForm.verifyCode)) {
        eeui.confirm({
          title: "温馨提示",
          message: "请输入您的验证码！",
          buttons: [{
            title: "确定",
            type: "positive"
          }]
        }, function (result) {});
        return;
      }
      // if (_this.loading == true){
      //   return;
      // }
      // _this.loading = true
      eeui.loading({
        cancelable:false
      });
      realName(_this.realNameForm).then(res=>{
        eeui.loadingClose();
        eeui.confirm({
          title: "温馨提示",
          message: JSON.stringify(res.content),
          buttons: [{
            title: "确定",
            type: "positive"
          }]
        }, function (result) {
          if (result.status == "click" && result.title == "确定") {
            eeui.closePage()
          }
        });
      }).catch(error=>{
        eeui.loadingClose();
        eeui.confirm({
          title: "温馨提示",
          message: '保存失败',
          buttons: [{
            title: "确定",
            type: "positive"
          }]
        }, function (result) {
          if (result.status == "click" && result.title == "确定") {
            eeui.closePage()
          }
        });
      })
    }
  }
}
</script>
<style lang="css" src="../../../style/wx.css"/>
<style scoped>
.app {
  background-color: rgba(248, 248, 248, 1);
}

.realName {
  border-radius: 16px;
  background-color: white;
  /*width: 650px;*/
  /*margin-left: 50px;*/
  /*margin-top: 40px;*/
  /*padding-bottom: 40px;*/
  width: 710px;
  margin-left: 20px;
  margin-top: 20px;
  padding-bottom: 20px;
}

.realName_header_title {
  font-size: 24px;
  color: #888888;
  /*width: 650px;*/
  width: 600px;
  margin-left: 55px;
  margin-top: 20px;
  display: block;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #b9bbba;
  padding-bottom: 20px;
  /*padding-top: 50px;*/
}

.realName_item {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #b9bbba;
  /*width: 650px;*/
  width: 600px;
  /*margin-left: 25px;*/
  margin-left: 55px;
  padding-bottom: 20px;
  padding-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.realName_item_title {
  font-size: 28px;
  color: #333333;
  width: 160px;
}

.realName_item_content {
  flex: 1;
  height: 60px;
  font-size: 26px;
}

.realName_item_imgbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin-top: 40px;
}

.realName_item_img {
  /*width: 300px;*/
  /*height: 200px;*/
  width: 250px;
  height: 200px;

}

.realName_item_botton {
  width: 130px;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.realName_item_botton_title {
  font-size: 22px;
  color: #ea706a;
}

.realName_botton {
  display: flex;
  justify-content: center;
  align-items: center;
  /*width: 650px;*/
  /*width: 550px;*/
  width: 600px;
  margin-left: 50px;
  height: 80px;
  border-radius: 12px;
  background-color: red;
  /*margin-top: 52px;*/
  margin-top: 80px;


}

.realName_botton_title {
  font-size: 26px;
  color: white;
}
</style>
